<template>
  <el-dialog
    :model-value="dialogVisible"
    width="35%"
    draggable
    destroy-on-close
    @open="open"
    @close="close"
  >
    <template v-slot:header>
      <div class="header">
        <i-ep-Tools style="color: blue"></i-ep-Tools>
        <span>表格表头字段设置</span>
      </div>
    </template>
    <div class="form_outer_class">
      <el-form
        v-for="item in formItems"
        :key="item.id"
        :model="item"
        class="form_class"
      >
        <el-form-item :label="item.keyLabel">
          <el-input
            v-model="item.key"
            :placeholder="'请输入' + item.keyLabel"
          />
        </el-form-item>
        <el-form-item :label="item.nameLabel">
          <el-input
            v-model="item.name"
            :placeholder="'请输入' + item.nameLabel"
          />
        </el-form-item>
        <el-button type="danger" size="default" @click="handleDelete(item.id)"
          >删除</el-button
        >
      </el-form>
    </div>
    <div style="text-align: center">
      <el-button type="primary" size="default" @click="addFormItem"
        >添加表头映射</el-button
      >
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { nanoid } from 'nanoid'
import { useAnalysisStore } from '@/stores'
defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:dialogVisible'])
const analysisStore = useAnalysisStore()
function initFormItems() {
  const arr: Array<{ [key: string]: string }> = []
  if (Object.keys(analysisStore.excelMapState).length > 0) {
    for (const [key, value] of Object.entries(analysisStore.excelMapState)) {
      arr.push({
        key: key,
        keyLabel: '字段名',
        name: value,
        nameLabel: '表头名',
        id: nanoid()
      })
    }
  } else {
    arr.push({
      key: '',
      keyLabel: '字段名',
      name: '',
      nameLabel: '表头名',
      id: nanoid()
    })
  }
  return arr
}

const formItems = ref<Array<{ [key: string]: string }>>([])
// 打开弹框
function open() {
  formItems.value = initFormItems()
}
// 添加映射对
function addFormItem() {
  formItems.value.push({
    key: '',
    keyLabel: '字段名',
    name: '',
    nameLabel: '表头名',
    id: nanoid()
  })
}
// 删除映射对
function handleDelete(id: string) {
  formItems.value = formItems.value.filter((item) => item.id !== id)
}
// 取消
function handleCancel() {
  close()
}
// 确定
function handleConfirm() {
  // analysisStore.excelMapState = formItems.value
  const obj: { [key: string]: string } = {}
  formItems.value.forEach((item) => {
    if (item.key) {
      obj[item.key] = item.name
    }
  })
  analysisStore.excelMapState = obj
  close()
}
function close() {
  emit('update:dialogVisible', false)
}
</script>

<style scoped lang="less">
.header {
  display: inline-flex;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
}
.form_outer_class {
  border: 1px solid #8df;
  padding: 5px;
  margin-bottom: 5px;
  .form_class {
    display: flex;
    justify-content: space-around;
  }
}
</style>
